<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '油车港介绍',
  },
}
</route>

<script lang="ts" setup>
// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

function back() {
  uni.navigateBack()
}

const info = ref({
  name: '油车港',
  desc: '文字描述文字描述文字描述文字描述文字描述文字描述',
  img: 'https://m.360buyimg.com/i/jfs/t1/306136/5/15674/110093/686777b2F2aac0155/a1b9c1b5ef5807c1.jpg',
  briefIntroduction: '在优越的生态环境和地域经济的催生下，古镇历经百年沧桑款款而来。从北国的质朴敦厚到江南水乡的精致婉约，遍布中国的古镇，浓缩着不同地域独特的环境特性和文化气质，在保留旧时市井格局的同时，也以独有的韵味承载着中国式栖居的理想城镇范本。',
  tabs: [{
    name: '采摘基地',
    content: '1“镇”最初为安定、抑制之意，指“一方之首山”，即一定区域内最大的山，周代的“镇服”、晋代的“方镇”，都是基于此义而产生、引申为派兵驻守的地方，文本文本文本文本文本文本文本文本文本文本文本文本',
  }, {
    name: '手作基地',
    content: '文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2',
  }],
  blockImg: 'https://m.360buyimg.com/i/jfs/t1/306136/5/15674/110093/686777b2F2aac0155/a1b9c1b5ef5807c1.jpg',
  LandscapeImg: [
    'https://m.360buyimg.com/i/jfs/t1/306136/5/15674/110093/686777b2F2aac0155/a1b9c1b5ef5807c1.jpg',
    'https://m.360buyimg.com/i/jfs/t1/306136/5/15674/110093/686777b2F2aac0155/a1b9c1b5ef5807c1.jpg',
    'https://m.360buyimg.com/i/jfs/t1/306136/5/15674/110093/686777b2F2aac0155/a1b9c1b5ef5807c1.jpg',
  ],
})
</script>

<template>
  <view>
    <!-- 仅返回按钮导航栏 -->
    <view class="fixed top-0 z-20 w-full transition-all duration-300">
      <view :style="{ height: `${safeAreaInsets?.top}px` }" />
      <view class="h-11 flex items-center px-30rpx">
        <wd-icon name="thin-arrow-left" size="22px" @click="back" />
      </view>
    </view>
    <!-- 背景图 -->
    <image class="absolute top-0 z-[-1] h-56 w-full" :src="info.img" mode="aspectFill" />
    <!-- aspectFit|aspectFill|widthFix -->
    <!-- 间隔占位 -->
    <view class="pt-5" :style="{ marginTop: `${safeAreaInsets?.top + 20}px` }" />
    <!-- 内容部分 -->
    <view class="px-[30rpx]">
      <!-- 头部 -->
      <view class="mt-4 text-#7b6e5b">
        <view class="text-60rpx font-500">
          {{ info.name }}
        </view>
        <view class="my-5 max-w-[360rpx] whitespace-normal break-words text-26rpx">
          {{ info.desc }}
        </view>
      </view>
      <view class="rounded-md bg-white p-4 text-26rpx leading-[1.8] shadow-md">
        {{ info.briefIntroduction }}
      </view>
      <!-- 速览 -->
      <view class="mt-5 text-40rpx">
        速览
      </view>
      <view class="mt-3 rounded-md bg-[linear-gradient(to_right,#eff0eb,#e9e8e4)] p-4 text-26rpx leading-[1.8]">
        <wd-tabs color="#7f6a4f" slidable="always" :swipeable="true">
          <block v-for="item in info.tabs" :key="item.name">
            <wd-tab :title="`${item.name}`" :name="item.name">
              <view class="mt-2 bg-white p-4">
                <view class="scrollbar-hide max-h-200rpx overflow-y-auto text-26rpx text-[#35372a] leading-[1.8]">
                  {{ item.content }}
                </view>
              </view>
            </wd-tab>
          </block>
        </wd-tabs>
      </view>
      <!-- 油车港镇区块图 -->
      <view class="mt-5 text-40rpx">
        油车港镇区块图
      </view>
      <image class="mt-3 h-50 w-full rounded-md" :src="info.blockImg" mode="aspectFill" />
      <!-- 油车港镇风光一览 -->
      <view class="mt-5 text-40rpx">
        油车港镇风光一览
      </view>
      <view v-for="item in info.LandscapeImg" :key="item">
        <image class="mt-3 h-50 w-full rounded-md" :src="item" mode="aspectFill" />
      </view>
      <!-- 底部高度占位 -->
      <view class="h-3" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
/* 修改滑块颜色 */
::v-deep .wd-tabs__line {
  background: #7b6f5e !important;
}

::v-deep .wd-tabs__nav-container {
  background: transparent !important;
}

/* 覆盖所有可能的背景层 */
::v-deep .wd-tabs {
  background-color: transparent !important;
}

::v-deep .wd-tabs__nav-wrapper {
  background-color: transparent !important;
}

::v-deep .wd-tabs__nav {
  background-color: transparent !important;
}

::v-deep .wd-tabs__nav-item {
  color: #aba299 !important;
}

::v-deep .wd-tabs__nav-item.is-active {
  color: #7f6a4f !important;
}
</style>
